<template>
    <div class="view-wrapper">
      <!-- app-container -->
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true">
          <el-form-item label="行业类型：" prop="shopTypeId">
            <el-cascader v-model="queryParams.shopTypeId" :options="typeLs" :show-all-levels="false" @change="handleChange">
            </el-cascader>
          </el-form-item>
          <el-form-item label="管辖区域：" prop="areaId">
            <el-select v-model="queryParams.areaId" filterable placeholder="请选择">
              <el-option v-for="item in optionsArea" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery('queryForm')"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="listBox_head">
            <el-button type="primary"  @click="addClick">新增费率区间</el-button>
        </div>  
        <el-table v-loading="loading" :data="tabList" stripe border >
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="管辖区域" align="center" prop="areaName"  :show-overflow-tooltip="true" />
          <el-table-column label="行业" align="center" prop="parentName" :show-overflow-tooltip="true" />
          <el-table-column label="子行业" align="center" prop="childName" :show-overflow-tooltip="true" />
          <el-table-column label="赚卡佣金费率区间" align="center" prop="num" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <div v-if="scope.row.rateRangeStart == scope.row.rateRangeEnd">{{scope.row.rateRangeStart}}%</div>
                <div v-else>{{scope.row.rateRangeStart}} - {{scope.row.rateRangeEnd}}%</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="editClick(scope.row)"
                >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        ></pagination>
      </div>
      <Dialog
        :id="id"
        :pathType="pathType"
        v-bind="$attrs"
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        @success="_handleSuccess"
      >
      </Dialog>
    </div>
  </template>
    
    <script>
  import {
    getList,
    shopTypeList,
  } from "@/api/setting/commissionManagement";
  // api
  import {
    userAreaSelect
  } from "@/api/common";
  import Dialog from "@/views/setting/commissionManagement/components/dialog";

  
  export default {
    name: "",
    components: {
      Dialog,
    },
    data() {
      
      var checkEndPrice = (rule, value, callback) => {
        var startPrice = parseFloat(this.queryParams.startPrice)
        var value = parseFloat(value)
        let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
        if ( startPrice >= value ) {
          return callback(new Error("只能填写大于最低售价的数值"));
        }else {
          return callback();
        }
        
      };
      return {
        id: '',
        exportLoading: false,
        dialogId: "",
        dialogVisible: false,
        ConfigurationVisible: false, //增删 弹窗
        reviewVisible: false,
        typeLs: [],
        optionsArea: [],
        // 遮罩层
        loading: false,
        // 导出遮罩层
        // 总条数
        total: 0,//状态字典数组
        //表格数据
        tabList: [],
        pathType: "add",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          areaId: "", //	区域id
          shopTypeId: '',//店铺类型id
        },
        rules: {
          endPrice: [
            {validator: checkEndPrice,required: true,trigger: ["change"]}
          ],
        }
      };
    },
    computed: {
      
    },
    created() {
      this.getList();
      this.getAreaList()
      this.getTypels()
    },
    methods: {
      init(){
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = 10
      },
      getAreaList() { //查询区域下拉框
        userAreaSelect().then(res => {
          this.optionsArea = res.result
        }).catch(() => {})
      },
      getTypels() {
        //获取行业类型-新
        this.loading = true;
        shopTypeList()
          .then((res) => {
            let ls = [];
            console.log("res.result+++", res.result);
            ls = this.getTreeData(res.result);
            // console.log(this.typeLs)
            let ls1 = ls.map((item) => {
              item.value = item.id;
              item.children.map((items) => {
                items.value = items.id;
              });
              return item;
            });
            console.log("ls1+++", ls1);
            this.typeLs = ls1;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      getTreeData(data) {
        // 循环遍历json数据
        for (var i = 0; i < data.length; i++) {
          if (data[i].children.length < 1) {
            // children若为空数组，则将children设为undefined
            //   data[i].children=undefined;
            delete data[i].children;
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        }
        return data;
      },
      handleChange(value) {
        let _this = this;
        console.log("value+++++++++++++", value[1]);
        _this.queryParams.shopTypeId = value[1];
      },
      /** 查询列表 */
      getList() {
        console.log('getList',getList())
        this.loading = true;
        getList(this.queryParams).then((response) => {
          response.result.records.forEach(item => {
            for (var key in item) {
              if (!item[key]) {
                item[key] = "-";
              }
            }
          });
          this.tabList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      // 表单重置
      reset() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          areaId: "", //	区域id
          shopTypeId: '',//店铺类型id
        };
        this.resetForm("queryForm");
        this.getList();
      },
      /** 搜索按钮操作 */
      handleQuery(formName) {
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.queryParams.pageNum = 1;
            this.getList();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.reset();
      },
      //新增
      addClick() {
        this.dialogVisible = true
        this.pathType = 'add'
      },
      // 编辑
      editClick(row) {
        this.dialogVisible = true
        this.pathType = 'edit'
        this.id = row.id
      },
      _handleSuccess(e) {
        //成功回调
        this.init()
        this.getList();
      },
    },
  };
  </script>
    <style scoped lang="scss">
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }
  
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  
  .listBox_head {
    padding: 0 0 20px 0;
    display: flex;
  }
  .el-dropdown{
    margin-left: 10px;
  }
  .main_top {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      font-size: 14px;
      color: #333;
      background: #fff;
      border-radius: 6px;
      margin-bottom: 10px;
      .lef {
        display: flex;
        justify-content: flex-start;
        border: 1px solid #dfe6ec;
        .list {
          height: 40px;
          text-align: center;
          line-height: 40px;
          width: 140px;
          text-align: center;
          border-right: 1px solid #dfe6ec;
          background: #fff;
        }
        .list:nth-last-child(1) {
          border: none;
        }
        .active {
          background: #1890ff;
          color: #fff;
        }
      }
    }
  .img_box {
    width: 100px;
    height: 80px;
    border-radius: 4px;
  }
  .imgBox{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    img{
      width: 90px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
  </style>
    